
<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>社交地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VhkT6V7yA3ieLfrjtN57hroWRgqIx9vO"></script>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script src="../lib/thingjs.min-v1.2.2.4.js"></script>
    <script src="../lib/jquery.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <!--引入弹窗层-->
    <script src="../layer/layer.js"></script>

        <style>
    body {
            margin:0;
            padding: 0;
          }
    a{
        text-decoration: none;
            }
    </style>
    </head>
<body>


<!--导航栏-->
    <nav class="navbar navbar-default" style="margin-bottom: 0">
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row">
            <div class="col-xs-12 col-md-10">
                <a href="/index"><img width="200px" height="50px" src="../imgs/logo2x.png"></a>
            </div>
            <div class="col-xs-6 col-md-2" style="line-height: 50px">
                <a href="/preManage" >后台管理</a>
            </div>
        </div>
    </nav>
<!--地图展示-->
    <div style="width:1910px;height:970px;border:1px solid gray" id="container"></div>
    <!--<div class="test" th:text="${list}"></div>-->
    <!--request:${list}<br/>-->
    <!--<c:forEach items="${list}"var="u">-->
        <!--${u.sName}<br/>-->
    <!--</c:forEach>-->

 <!--<div style="width:800px;height:1000px;border:1px solid gray" id="info"></div>-->
<!--<p id="info"></p>-->



</body>
<script type="text/javascript">


    //创建地图
    var map = new BMap.Map("container");

    //启用滚轮缩放
    map.enableScrollWheelZoom(true);



    // marker.addEventListener("click",getAttr);
    // function getAttr(){
    //     var p = marker.getPosition();       //获取marker的位置
    //     alert("marker的位置是" + p.lng + "," + p.lat);
    // }


    //设置中心点，缩放级别
    map.centerAndZoom( new BMap.Point(116.410385,39.926112), 13);

    // setTimeout(function(){
    //     map.setZoom(13);
    // }, 2000);//2秒后放大到14级

    // //单击获取点击的经纬度
    // map.addEventListener("click",function(e){
    //     alert(e.point.lng + "," + e.point.lat);
    // });


    // var marker = new Array(); //存放标注点对象的数组
    var saveId = new Array();

    $.ajax({
        url: "/test",
        dataType: "json",   //返回的数据是json 格式
        type: "post",

        success: function (data) {

            //循环json在地图上添加标记

            for (var index in data) {

                console.log(index);

                // console.log(data[index]);
                var lng = data[index].sLng;
                var lat = data[index].sLat;
                //创建一个标记
                var point = new BMap.Point(lng,lat);
                // marker[index] = new BMap.Marker(point);  // 创建标注
                var marker = new BMap.Marker(point);
                saveId[index] = data[index].sId;
                // console.log(saveId[index]);
                // console.log(marker);

                //标记添加点击事件

                map.addOverlay(marker);              // 将标注添加到地图中
                //循环给标记绑定点击事件 注意闭包的使用
                (function(i){
                    // var theData = data[index];
                    marker.addEventListener('click',function(){
                        layer.open({
                            type: 2,
                            title: false,
                            closeBtn: 0,
                            area: ['100%', '100%'],
                            shadeClose: true, //点击遮罩关闭
                            //去掉父层的滚动条
                            scrollbar: false,
                            //templates里面的是模版文件，不能直接通过文件+后缀名的方式访问，只能通过走服务器访问（no去掉自己的滚动条）   +data[index].sId+''走controller根据id展示内容
                            // content: ['http://localhost:8085/scene?sId='+theData.sId+'','no']
                            content: ['http://localhost:8085/scene?sId='+i.sId+'','no']
                        });
                    });
                })(data[index]);

            }
            }
    });


</script>
</html>

